<template>
  <div>
    <div class="header-btn">
      <div>新增群发短信</div>
      <div>
        <el-button type="primary">确认</el-button>
        <el-button type="info" plain @click="$router.back()">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="right"
        style="position: relative"
      >
        <el-form-item label="群发名称名称" prop="taskName">
          <el-input
            v-model="form.taskName"
            popper-class="minWidth-inp"
            style="width: 600px"
            placeholder="请输入"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="短信签名" prop="taskName">
          <el-select
            v-model="form.value"
            placeholder="请选择"
            style="width: 600px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="短信模板" prop="taskName">
          <el-select
            v-model="form.value"
            placeholder="请选择"
            style="width: 600px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发送对象">
          <div>
            <el-radio-group v-model="form.radio">
              <el-radio :label="3">导入接受号码文件</el-radio>
              <el-radio :label="6">手动输入电话</el-radio>
            </el-radio-group>
          </div>
          <el-button

            v-show="form.radio === 3"
            type="primary"
            icon="el-icon-plus"
            @click="importVisible = true"
            >导入号码</el-button
          >
          <el-input
            v-show="form.radio === 6"
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="请填写文本内容"
            v-model="form.remark"
            style="width: 600px; "
            maxlength="640"
            show-word-limit
          >
          </el-input>
          <!-- <div v-show="formDetail">{{ form.remark }}</div> -->
        </el-form-item>
        <el-form-item label="发送时间">
          <div>
            <el-radio-group v-model="form.radio">
              <el-radio :label="3">立即发送</el-radio>
              <el-radio :label="6">定时发送</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            v-model="form.value1"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <!-- 导入话术 -->
    <el-dialog title="导入号码" :visible.sync="importVisible" width="30%">
      <div>
        <div>
          1、<span class="import-template" @click="downLoadTemplate"
            >下载模板</span
          >
          ，按格式准备需要导入的数据
        </div>
        <div class="import-file">
          2、上传需要导入的文件
          <el-upload
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            action="/"
          >
            <el-button size="small">
              <svg-icon iconClass="upload-simple"></svg-icon>
              <span class="ml5">选择文件</span>
            </el-button>
          </el-upload>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="importVisible = false">取 消</el-button>
        <el-button type="primary" @click="importResultVisible = true"
          >下一步</el-button
        >
      </div>
    </el-dialog>
    <!-- 导入结果 -->
    <el-dialog title="导入话术" :visible.sync="importResultVisible" width="30%">
      <div v-if="importErrorMsg">
        <svg-icon iconClass="info"></svg-icon>{{ importErrorMsg }}
      </div>
      <div v-else><svg-icon iconClass="success"></svg-icon>成功</div>
      <div slot="footer">
        <el-button type="primary" @click="importResultVisible = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SendMessage",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      importVisible: false, //导入弹窗
      importResultVisible: false, //导入结果
      importErrorMsg: "",
      form: {
        // 基础设置
        taskName: "", // 任务名称
        value: "", //短信模板
        radio: 3, //发送对象
        value1:'',//发送时间
        chooseStaff: "1",
        remark: "",
        pageNum: 1,
        pageSize: 10,
      },
      rules: {
        title: [
          { required: true, message: "请输入文案内容", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 下载模板
    downLoadTemplate() {
      window.open(
        "http://192.168.0.86:9230/admin/statics/2022/10/24/e437afc8-a73b-436b-9234-582ed77a8062.xlsx"
      );
    },
    //导入
    handleBeforeUpload(file) {
      let formData = new FormData();
      formData.append("file", file);
      importVerbal(formData).then((res) => {
        this.importErrorMsg =
          res.code === 200 && res.data === "Y" ? res.msg : "";
        this.importVisible = false;
        this.importResultVisible = true;
      });
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }
  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;
      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 10px;
  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}
.group {
  position: relative;
  margin-top: 5px;
  width: 180px;
  height: 60px;
  border: 1px solid #082aff;
  color: #082aff;
  border-radius: 6px;
  padding-left: 5px;
  .two {
    margin-top: -5px;
  }
  .el-icon-error {
    position: absolute;
    right: -5px;
    top: -7px;
    font-size: 20px;
  }
}

.seleteGroup {
  ::v-deep .el-dialog__header {
    background: #eeeeee;
    color: #2a2a2a;
  }
}
.tableGroup {
  height: 40px !important;
  padding-left: 10px;
}
.block-wrap {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-weight: 400;
  color: #2a2a2a;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  .block-item {
    width: 80px;
    padding: 5px 0;
    margin: 10px;
    border: $normalBorder;
    text-align: center;
    .svg-icon {
      width: 4em;
      height: 3em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      margin-top: 12px;
    }
    div {
      margin-top: -10px;
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}
.import-template {
  color: rgba(15, 64, 245, 1);
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 30px;
  display: inline-block;
}

.import-file {
  display: flex;
  align-items: center;

  > div {
    margin-left: 10px;
  }
}
</style>
